<template>
  <div>
    <el-table :data="tableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
              :height="tableHeight"
    >
      <el-table-column
        align="center"
        prop="tradeNo"
        width="200px"
        label="交易单号">
      </el-table-column>

      <el-table-column
        align="center"
        prop="userName"
        label="交易时间">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="tradeType"
        label="交易类型">
      </el-table-column>

      <el-table-column
        align="center"
        label="子类型">
        <template slot-scope="{row}">
          {{row.subType === -1 ? '其他' : row.subType | toConverter('PAYMENT_LIST')}}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="win"
        label="金额">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="状态">
        <template slot-scope="{row}">
          <badge-text :value="row.status" dic="RECHARGE_STATUS"></badge-text>
        </template>
      </el-table-column>
      <template slot="empty">
        <div class="el-table__empty">
          <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
          <div class="el-table-text">暂无数据</div>
        </div>
      </template>
    </el-table>

    <div class="el-pagination-container">
      <el-pagination
        bordered
        :page-sizes="pageSize"
        :disabled="loading"
        @size-change="gridSizeChange" @current-change="gridCurrentChange"
        :current-page="filters.page" :page-size="filters.size"
        :total="tableData.total">
      </el-pagination>
      <el-warning>红色负数代表会员盈利，绿色正数代表公司盈利</el-warning>
    </div>
  </div>
</template>

<script>
  import {rechargeDetailApi as getApi} from '@/services/api/report';

  import {grid} from '@/build';

  import commonMixins from './common';

  export default {
    name: "sub-member-recharge-detail",

    mixins: [grid, commonMixins],

    data() {
      return {
        filters: {
          page: 1,
          size: 10,
        },
        tableData: {
          list: [],
          total: 0,
        }
      };
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
      });

      this.getAll();
    }
  };
</script>

<style scoped>

</style>